<template>
    <v-menu
        location="bottom"
        :close-on-content-click="false"
        persistent
        v-model="common_menu"
    >
        <template v-slot:activator="{ props }">
            <v-btn
                variant="text"
                v-bind="props"
                style="position: absolute; right: 0; opacity: 1;"
                :disabled="disabled"
            >
                {{ this.designStore.interActive[type] }}
            </v-btn>
        </template>
        <v-list>
            <v-list-item
                v-for="(item, index) in menus"
                :key="index"
                :value="item"
                @click="select_item(item)"
                >{{ item }}
            </v-list-item>
        </v-list>
    </v-menu>
</template>
<script>
import { useDesignStore } from '../../../../../stores/design'
export default {
    name: 'CommonMenu',
    props: {
        menus: Object,
        type: String,
        disabled: Boolean
    },
    data() {
        return {
            designStore: useDesignStore(),
            common_menu: false
        }
    },
    methods: {
        select_item(submenu) {
            this.common_menu = false
            this.designStore.interActive[this.type] = submenu
        }
    }
}
</script>
